<!-- 车型添加 -->
<template>
  <div>
    <!-- 弹窗 -->
    <el-dialog
      :title="addForm.id ? '编辑车型' : '新增车型'"
      :visible.sync="dialogFormVisible"
      @close="closeDialog"
    >
      <div class="dialog">
        <el-form
          ref="addForm"
          label-position="right"
          label-width="80px"
          :model="addForm"
          :rules="rules"
        >
          <el-form-item
            label="车辆类型"
            prop="name"
          >
            <el-input
              v-model="addForm.name"
              placeholder="请输入车辆类型"
              style="width: 400px;"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="应载重量"
            prop="allowableLoad"
          >
            <el-input
              v-model="addForm.allowableLoad"
              placeholder="请输入车型载重"
              style="width: 400px;"
            >
              <span
                slot="suffix"
                style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                    line-height: 40px;
                  "
              >吨</span>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="allowableVolume"
            label="应载体积"
          >
            <el-input
              v-model="addForm.allowableVolume"
              placeholder="请输入车型体积"
              style="width: 400px;"
            >
              <span
                slot="suffix"
                style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                    line-height: 40px;
                  "
              >立方</span>
            </el-input>
          </el-form-item>
          <el-form-item
            label="长"
          >
            <el-input
              v-model="addForm.measureLong"
              placeholder="0.0"
              style="width: 400px;"
            >
              <span
                slot="suffix"
                style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                    line-height: 40px;
                  "
              >米</span>
            </el-input>
          </el-form-item>
          <el-form-item
            label="宽"
          >
            <el-input
              v-model="addForm.measureWidth"
              placeholder="0.0"
              style="width: 400px;"
            >
              <span
                slot="suffix"
                style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                    line-height: 40px;
                  "
              >米</span>
            </el-input>
          </el-form-item>
          <el-form-item
            label="高"
          >
            <el-input
              v-model="addForm.measureHigh"
              placeholder="0.0"
              style="width: 400px;"
            >
              <span
                slot="suffix"
                style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                    line-height: 40px;
                  "
              >米</span>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="danger"
          @click="submit"
        >确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getCarModelInfoApi, editCarModelApi, addCarModelApi } from '@/api/carModel'
export default {
  name: 'CarModelsAdd',
  data() {
    return {
      // 校验
      rules: {
        name: [
          { required: true, message: '车辆名称不能为空', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '应载重量不能为空', trigger: 'blur'
          }
        ],
        allowableVolume: [
          { required: true, message: '应载体积不能为空', trigger: 'blur'
          }
        ]
      },
      // 添加车型所需参数
      addForm: {
        allowableLoad: null, // 准载重量
        allowableVolume: null, // 准载体积
        measureHigh: 0.0, // 高
        measureLong: 0.0, // 长
        measureWidth: 0.0, // 宽
        name: '' // 车辆类型名称
      },
      // 弹窗开关
      dialogFormVisible: false
    }
  },
  methods: {
    open() {
      this.dialogFormVisible = true
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogFormVisible = false
      // 清空表单
      this.addForm = {
        allowableLoad: null, // 准载重量
        allowableVolume: null, // 准载体积
        measureHigh: 0.0, // 高
        measureLong: 0.0, // 长
        measureWidth: 0.0, // 宽
        name: '' // 车辆类型名称
      }
      this.$refs.addForm.resetFields()
    },
    // 编辑车型,回显信息
    async editCarInfo(id) {
      this.dialogFormVisible = true
      const { data } = await getCarModelInfoApi(id)
      console.log('回显车型信息', data)
      this.addForm = data
    },
    // 点击确定添加车型和编辑车型
    async submit() {
      try {
        await this.$refs.addForm.validate()
        if (this.addForm.id) {
          await editCarModelApi(this.addForm.id, this.addForm)
          this.$message.success('编辑成功')
        } else {
          await addCarModelApi(this.addForm)
          this.$message.success('添加成功')
        }
        this.closeDialog()
        this.$emit('getList')
        // this.getTableList()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dialog{
  padding: 0 30px 0 60px;
}
.dialog-footer{
  text-align: center;
}
</style>
